import React, { useState, useCallback, useMemo, useEffect } from 'react';
import { Common } from 'UtilsCommon';
import { Icon } from 'Configs';
import { Calendar, Popup } from 'antd-mobile';
import Base from './base';

const getValue = (value) => {
    if (!value) return null;
    let value2 = '';
    if (typeof value === 'string') value2 = Common.trim(value);
    else value2 = Common.getDateString(value).substring(0, 10);
    return value2;
};

const valueChange = (property, value) => {
    if (property.valueChange) property.valueChange(value);
};

export default (props) => {
    const { property } = Base.getProps(props);

    useMemo(() => {
        if (!property.dataType) property.dataType = 'DateTime';
        Base.setDefaultValue(property);
    }, [property]);

    const [visible, setVisible] = useState(false);
    const [value, setValue] = useState(Base.getInitValue(property));
    const [isVisible, setIsVisible] = useState(property.isVisible !== false);

    const onChange = useCallback((v) => {
        property.isChanged = true;
        const v2 = getValue(v);
        setValue(v2);
        Base.bindDataValue(property, v2);
        setVisible(false);
    }, [property, setValue, setVisible]);

    const onShow = useCallback(() => setVisible(true), [setVisible]);
    const onCancel = useCallback(() => setVisible(false), [setVisible]);

    useEffect(() => {
        valueChange(property, value);
    }, [property, value]);

    property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
    property.setValue = (v) => setValue(v);
    property.getValue = () => getValue(value);
    property.isSelect = true;

    if (!isVisible) return null;

    const extra = "请选择日期" + (property.isNullable === false ? "" : "(可选)");

    const { style, label, className, labelStyle, isAddColon, isNullable, isRed } = property;

    const isRed2 = property.isRed2 || (isNullable === false && isRed);

    const label2 = property.isLabel === false ? '' : label;

    const text = Common.isNullOrEmpty(value) ? extra : value.substring(0, 10);

    const textStyle = { ...property.textStyle };
    if (Common.isNullOrEmpty(value)) textStyle.color = '#9AA3BB';

    const value2 = Common.isNullOrEmpty(value) ? (property.startDate ? Common.convertToDate(property.startDate) : null) : Common.convertToDate(value);

    return <React.Fragment>
        <div className={className} style={style}>
            {label2 && <div style={Base.setStyle(labelStyle)}>
                {isRed2 ? <span style={{ color: 'red', position: 'relative', paddingRight: '0.125rem', top: '0.125rem' }}>*</span> : ''}
                {label2}{isAddColon ? '：' : ''}
            </div>}
            <div style={Base.setStyle(textStyle)} className='buttonActive' onClick={onShow}>
                {text}<Icon type='down' color={textStyle.color} fontSize={textStyle.fontSize} />
            </div>
        </div>
        <Popup visible={visible}
            onMaskClick={onCancel}
            onClose={onCancel}>
            <div className='divDateTitle'>
                <div className='divLeft'></div>
                <div className='divText'><span>{label2 + '（再次点击可取消）'}</span></div>
                <div className='divRight' onClick={onCancel}>
                    <Icon type='close' color={'#999'} fontSize={'32rem'} />
                </div>
            </div>
            <Calendar selectionMode='single' defaultValue={value2} onChange={onChange} />
        </Popup>
    </React.Fragment>;
};
